import React, { Component } from 'react'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
const items: MenuProps['items'] = [
    {
        label: (<Link to='/'>home</Link>),
        key: 'Home',
        icon: <MailOutlined />,
    },
    {
        label: 'Navigation Two',
        key: 'app',
        icon: <AppstoreOutlined />,
    },
    {
        label: 'Navigation Three - Submenu',
        key: 'SubMenu',
        icon: <SettingOutlined />,
        children: [
            {
                type: 'group',
                label: 'Item 1',
                children: [
                    {
                        label: 'Option 1',
                        key: 'setting:1',
                    },
                    {
                        label: 'Option 2',
                        key: 'setting:2',
                    },
                ],
            },
            {
                type: 'group',
                label: 'Item 2',
                children: [
                    {
                        label: 'Option 3',
                        key: 'setting:3',
                    },
                    {
                        label: 'Option 4',
                        key: 'setting:4',
                    },
                ],
            },
        ],
    },
    {
        label: (
            <Link to='/about'>
                about
            </Link>
        ),
        key: 'alipay',
    },
];
export default class index extends Component {
    state = {
        current: 'mail'
    }
    onClick = () => {

    }
    render() {
        const { current } = this.state
        return (
            <div>
                <Menu onClick={this.onClick} selectedKeys={[current]} mode="horizontal" items={items} />
            </div>
        )
    }
}
